<template>
	<div class="mainWrapper Adjustment">
		<el-breadcrumb separator="/">
			<el-breadcrumb-item :to="{ path: '/' }">
				<i class="lh lh-caiwu fw_100"></i>
			</el-breadcrumb-item>
			<el-breadcrumb-item>账单结算</el-breadcrumb-item>
			<el-breadcrumb-item>人才签约管理</el-breadcrumb-item>
		</el-breadcrumb>

		<div class="content_Box box-shadow">
			<div class="py_5 px_10">
				<el-row>
					<el-col :span="4">
						<el-button type="default" class="fl" @click="downloadOrder()" round size="mini">导出</el-button>
					</el-col>
					<el-col :span="20" class="fr">
						<el-form :inline="true" class="form-inline fr" @keyup.enter.native="shearchBtn()">
							<el-form-item class="w_100">
								<el-input v-model="name" placeholder="姓名"></el-input>
							</el-form-item>
							<el-form-item class="w_100">
								<el-input v-model="mobile" placeholder="手机号"></el-input>
							</el-form-item>
							<el-form-item class="w_120">
								<el-input v-model="identity_card" placeholder="身份证号"></el-input>
							</el-form-item>
							<el-form-item class="w_110">
								<el-select v-model="settlement_channel_sn" clearable placeholder="税源地">
									<el-option v-for="item in tlementList" :key="item.id" :label="item.name" :value="item.sn"></el-option>
								</el-select>
							</el-form-item>
							<el-form-item prop="start_time">
								<el-date-picker
									class="w_180i"
									v-model="start_time"
									type="datetime"
									value-format="yyyy-MM-dd HH:mm:ss"
									format="yyyy-MM-dd HH:mm:ss"
									default-time="00:00:00"
									placeholder="开始时间"
								>
								</el-date-picker> </el-form-item
							>~
							<el-form-item prop="end_time">
								<el-date-picker
									class="w_180i"
									v-model="end_time"
									type="datetime"
									value-format="yyyy-MM-dd HH:mm:ss"
									format="yyyy-MM-dd HH:mm:ss"
									default-time="23:59:59"
									placeholder="结束时间"
								>
								</el-date-picker>
							</el-form-item>
							<el-button size="mini" type="primary" class="round-right" native-type="button" @click="shearchBtn"
								>搜索</el-button
							>
							<el-button size="mini" round @click="resetBtn">重置</el-button>
						</el-form>
					</el-col>
				</el-row>
			</div>

			<div class="tableMaxBox">
				<template>
					<!-- 表格部分 -->
					<el-table :data="ListData" stripe>
						<el-table-column prop="id" label="序号" width="50px" align="center">
							<template slot-scope="{ row, $index }">
								<span>{{ $index + 1 }}</span>
							</template>
						</el-table-column>
						<el-table-column prop="staff_name" label="姓名">
							<template slot-scope="{ row, $index }">
								<span class="pointer u text-primary" @click="toPersonnelListHx(row)">{{ row.staff_name }}</span>
							</template>
						</el-table-column>
						<el-table-column prop="mobile" label="手机号"></el-table-column>
						<el-table-column prop="tax_sources_name" label="税源地名称">
							<template slot-scope="{ row, $index }">
								<span>{{ row.tax_sources_name }}</span>
							</template>
						</el-table-column>
						<el-table-column prop="add_time" label="签约时间"> </el-table-column>
					</el-table>
					<!-- 分页组件 -->
					<page :total="total" :pageNums="pageNum" @pagedata="onChildValue"></page>
				</template>
			</div>
		</div>
	</div>
</template>

<script>
var common = require('../../../static/tool.js')
import { fetchSignList, fetchtlementChannel } from '@/api/talent.js'
import { fetchAreaList } from '@/api/shop.js'
import { fetchCityList } from '@/api/city.js'
export default {
	name: 'TalentContract',
	data() {
		return {
			url: common.url,
			//搜索数据
			name: '',
			mobile: '',
			identity_card: '',
			settlement_channel_sn: '',
			start_time: '',
			end_time: '',
			tlementList: [],
			//表格数据
			ListData: [],

			total: 0,
			pageNum: 1,
			pageSizeNow: 20
		}
	},
	created() {
		this.gettlementChannel()
	},
	mounted() {},
	methods: {
		async fetchTableData() {
			try {
				let ret = await fetchSignList({
					pageSize: this.pageSizeNow,
					page: this.pageNum,
					staff_name: this.name,
					mobile: this.mobile,
					identity_card: this.identity_card,
					settlement_channel_sn: this.settlement_channel_sn,
					start_time: this.start_time,
					end_time: this.end_time
				})
				this.ListData = ret.list
				this.total = ret.count
			} catch (err) {
				console.log(err)
			}
		},
		// 获取结算通道
		async gettlementChannel() {
			try {
				let ret = await fetchtlementChannel()
				this.tlementList = ret.data.list
			} catch (err) {
				console.log(err)
			}
		},
		shearchBtn() {
			// 搜索
			this.pageNum = 1
			this.fetchTableData()
		},
		resetBtn() {
			//重置
			this.resetData() //重置请求数据
			this.pageNum = 1
			this.fetchTableData()
		},
		resetData() {
			//重置请求数据
			this.pageNum = 1
			this.name = ''
			this.mobile = ''
			this.identity_card = ''
			this.settlement_channel_sn = ''
			this.start_time = ''
			this.end_time = ''
		},
		//跳转人才画像
		toPersonnelListHx(row) {
			const { href } = this.$router.resolve({ path: '/personnelListHx', query: { id: row.staff_id } })
			window.open(href, '_blank')
		},
		//商户调账记录-导出
		downloadOrder() {
			let obj = {
				token: JSON.parse(sessionStorage.getItem('manageInfo')).token,
				operation: 'export',
				staff_name: this.name,
				mobile: this.mobile,
				identity_card: this.identity_card,
				settlement_channel_sn: this.settlement_channel_sn,
				start_time: this.start_time,
				end_time: this.end_time
			}
			let param = $.param(obj)
			window.location.href = this.url + '/talentsFootUp/signList?' + param
		},
		//分页组件->子组件传值
		onChildValue(item) {
			this.pageNum = item[0]
			this.pageSizeNow = item[1]
			this.fetchTableData()
		},
		hiddenRY() {}
	}
}
</script>

<style scoped></style>



// WEBPACK FOOTER //
// src/components/talentSettlement/TalentContract.vue